<template>
  <div v-title="'退票改签 - 世外票务云平台'">
    <mk-breadcrumb :is-return="false" :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-tabs v-model="activeName" @tab-click="handleClick" class='MkChangeTicket globalTabsStyle'>
      <el-tab-pane label="退票改签" name="first">
        <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightBig)+'px'}]">
        <mk-change-ticket-list :active-name="activeName"></mk-change-ticket-list>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="操作记录" name="second">
        <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightBig)+'px'}]">
        <mk-handle-records :active-name="activeName"></mk-handle-records>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
  import MkChangeTicketList from './changeTicketList.vue'
  import MkHandleRecords from './handleRecords.vue'
import {mapState} from 'vuex'

  export default {
    name: 'MkChangeTicket',
    components: {
      MkBreadcrumb, MkChangeTicketList, MkHandleRecords
    },
    computed: mapState({
      bodyHeight: state=> state.global.bodyHeight,
      fixedHeightBig: state=> state.global.fixedHeightBig,
    }),
    methods: {
      handleClick() {
      }
    },
    mounted: function() {

    },
    data () {
      return {
        activeName: 'first',
        breadcrumbData: {
          list: {
            first: {name: '票务管理',path: null, isClickAble: false},
            second: {name: '退票改签',path: null,isClickAble: false}
          },
          menuIconStyle : 'ticketIconStyle'
        }
      }
    }
  }
</script>
<style lang="less">
  .MkChangeTicket{
    margin-top:-10px;
  }
</style>

